<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<div class="container">
    <div style="height: 30px"></div>
    <button type="button" id="execute_script" class="btn btn-success">查看日志</button>

    <h4>日志内容:</h4>
    <div style="height: 600px;overflow: auto;" id="content_logs">
        <div id="messagecontainer" style="font-size: 16px;background-color: black;color: white">
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    // 点击按钮
    $('#execute_script').click(function () {
        // 新建websocket连接
        const chatSocket = new WebSocket(
            'ws://'
            + window.location.host
            + '/ws/result/'
        );

        // 连接建立成功事件
        chatSocket.onopen = function () {
            console.log('WebSocket open');
            //发送字符: laying_eggs到服务端
            chatSocket.send(JSON.stringify({
                'message': 'laying_eggs'
            }));
            console.log("发送完字符串laying_eggs");
        };
        // 接收消息事件
        chatSocket.onmessage = function (e) {
            {#if (e.data.length > 0) {#}
            //打印服务端返回的数据
            console.log('message: ' + e.data);
            // 转换为字符串，防止卡死testestt
            $('#messagecontainer').append(String(e.data) + '<br/>');
            //滚动条自动到最底部
            $("#content_logs").scrollTop($("#content_logs")[0].scrollHeight);
            {# }#}
        };
        // 关闭连接事件
        chatSocket.onclose = function (e) {
            console.log("connection closed (" + e.code + ")");
            chatSocket.send(JSON.stringify({
                'message': 'close'
            }));
        }
    });
</script>
</html>